<template>
  <div class="app-container">
    <el-button type="primary" @click="goBack">返回</el-button>
    <div class="title-top">
      <div class="year">{{ form.gradYear }}年毕业离校</div>
      <div class="type">
        <div class="container">
          <div>毕业离校人数</div>
          <div>{{ form.gradNumber }}人</div>
        </div>
        <div class="container">
          <div v-for="(v, i) in form.depGradStats" :key="i">
            {{ v.type }}毕业离校：{{ v.number }}人
          </div>
        </div>
      </div>
      <div class="time">
        <div class="containers">
          <div>毕业离校时间</div>
          <div>
            {{
              form.gdpStartTime == null
                ? "暂无数据"
                : form.gdpStartTime + "至" + form.gdpEndTime
            }}
          </div>
        </div>
        <div class="containers">
          <div>饭卡等注销时间</div>
          <div>
            {{
              form.cancelStartTime == null
                ? "暂无数据"
                : form.cancelStartTime + "至" + form.cancelEndTime
            }}
          </div>
        </div>
        <div class="containers">
          <div>学生确认时间</div>
          <div>
            {{
              form.confirmStartTime == null
                ? "暂无数据"
                : form.confirmStartTime + "至" + form.confirmEndTime
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="grad-stute">
      <span>学生状态</span> ：<el-checkbox-group
        v-model="form.gradScopes"
        disabled
      >
        <el-checkbox
          v-for="dict in dict.type.dep_grad_scope"
          :key="dict.value"
          :label="dict.value"
          :value="dict.value"
          >{{ dict.label }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <!-- <el-table :data="computedData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table> -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="collegeName"
        label="院系"
        :show-overflow-tooltip="true" align="center"
      >
      </el-table-column>
      <el-table-column prop="type" label="类别" :show-overflow-tooltip="true" align="center">
      </el-table-column>
      <el-table-column prop="number" label="人数" :show-overflow-tooltip="true" align="center">
      </el-table-column>
      <el-table-column
        prop="collegeName1"
        label="院系"
        :show-overflow-tooltip="true" align="center"
      >
      </el-table-column>
      <el-table-column prop="type1" label="类别" :show-overflow-tooltip="true" align="center">
      </el-table-column>
      <el-table-column prop="number1" label="人数" :show-overflow-tooltip="true" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>       
<script>
import { getGradsettings } from "@/api/departure/gradsettings";
export default {
  dicts: [
    "dep_grad_scope", // 学生状态
    "wsp_poverty_type", // 类型
  ],
  components: {},
  computed: {},
  data() {
    return {
      tableData: [],
      form: {},
    };
  },

  created() {
    getGradsettings(this.$route.query.dgsId).then((res) => {
      this.form = res.data;
     
      this.tableData =  this.handleDate(res.data.depCollGradStats);

      console.log(this.tableData, "详情");
    });
  },
  methods: {
    // 返回上一级
    goBack() {
      this.$router.go(-1)
    },
    handleDate(arr) {
      let mergedArr = [];
      for (let i = 0; i < arr.length - 1; i += 2) {
        let obj = {};
        obj["collegeName"] = arr[i]["collegeName"];
        obj["type"] = arr[i]["type"];
        obj["number"] = arr[i]["number"];
        obj["collegeName1"] = arr[i + 1]["collegeName"];
        obj["type1"] = arr[i + 1]["type"];
        obj["number1"] = arr[i + 1]["number"];
        mergedArr.push(obj);
      }
      return mergedArr;
    },
  },
};
</script>
<style lang="scss" scoped>
.title-top {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  height: 100px;
  margin-top: 5px;
}
.year {
  width: 15%;
  border: 1px solid #d9d9d9;
  text-align: center;
  line-height: 100px;
}
.type {
  width: 33%;
  border: 1px solid #d9d9d9;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 20px;
  align-items: center; /* 垂直居中 */
}
.time {
  width: 50%;
  border: 1px solid #d9d9d9;
  display: flex;
  justify-content: space-between;
  text-align: center;

  align-items: center; /* 垂直居中 */
}
.container {
  margin: 0 10% 0 10%;
}
.containers {
  margin: 0 2% 0 2%;
}
.grad-stute {
  border: 1px solid #d9d9d9;
  height: 50px;
  line-height: 50px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 30px;
  display: flex;
}
</style>